<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 - 3D</title>
<style>
body{
	background:#EEE url(img/bg0.png) repeat-x fixed;
	font:1em  "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding:3em;
}
h1{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-shadow: #fff 0 0 1px;
}
.blurmenu{
	font-size:1.5em;
	margin:0.5em 0 2em;
	padding:0;
	list-style:none;
	overflow:hidden;
	-webkit-user-select: none;
}
.blurmenu li{
	float: left;
	margin:5px;
}
.blurmenu li a{
	padding:5px;
	text-decoration:none;
	font-weight: bold;
	text-shadow: #333 0 0 5px;
	color: rgba(0, 0, 0, 0);
	color: #333\9;
}
li a:hover{
	text-shadow: #000 0 0 1px;
}
.transition li a{
	-webkit-transition: 250ms ease-out;
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
}
</style>
</head>

<body>

<h1>BlurMenu Example</h1>
	Browser transition:
    <ul class="blurmenu transition">
    	<li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
    </ul>
    Simple JavaScript:
    <ul id="jsblurmenu" class="blurmenu">
    	<li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
    </ul>
    Without transition:
    <ul class="blurmenu">
    	<li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
    </ul>
<div style="margin-top:10em"><p>&copy;2010 David Gonzalez Garcia - <a href="http://davidxl.blogspot.com/">davidxl.blogspot.com</a></p></div>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script type="text/javascript">
	var a,b;
	$(document).ready(function() {
		$("#jsblurmenu li a").hover(
			function () {
				a = this;
				a.style.textShadow = "#333 0 0 4px"
				setTimeout('a.style.textShadow = "#222 0 0 3px";',85);
				setTimeout('a.style.textShadow = "#111 0 0 2px";',165);
				setTimeout('a.style.textShadow = "#000 0 0 1px";',250);
				return false;
			}, 
			function () {
				b = this;
				b.style.textShadow = "#000 0 0 2px"
				setTimeout('b.style.textShadow = "#111 0 0 3px";',85);
				setTimeout('b.style.textShadow = "#222 0 0 4px";',165);
				setTimeout('b.style.textShadow = "#333 0 0 5px";',250);
			}
		);
	});
</script>
</body>
</html>
